<template>
  <div class="conMain">
    <el-card class="box-card">
      <div slot="header" class="topfix">
        <cards-data :card-lists="tjlist" />
        <el-form style="margin-top: 20px;;" :inline="true" :model="params" size="small" class="goodsForm"
          label-width="100px">
          <el-form-item label="SN">
            <el-input v-model="params.s_sn" clearable placeholder="请输入SN" />
          </el-form-item>
          <el-form-item label="代理ID">
            <el-input v-model="params.s_agent_id" clearable placeholder="请输入代理ID" />
          </el-form-item>
          <el-form-item label="代理名称">
            <el-input v-model="params['s_agent*name']" clearable placeholder="请输入代理名称" />
          </el-form-item>
          <el-form-item label="提现时间" prop="s_createtime">
            <el-date-picker v-model="params.s_createtime" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" />
          </el-form-item>

          <el-form-item label="提现来源">
            <el-select v-model="params.s_source_type" clearable placeholder="请选择">
              <el-option v-for="(item,index) in txlist" :key="index" :label="item.txt" :value="item.val" />
            </el-select>
          </el-form-item>

          <el-form-item label="收款方式">
            <el-select v-model="params.s_draw_type" clearable placeholder="请选择">
              <el-option v-for="(item,index) in dtlist" :key="index" :label="item.txt" :value="item.val" />
            </el-select>
          </el-form-item>

          <el-form-item label="收款账号">
            <el-input v-model="params.s_draw_account" clearable placeholder="请输入收款账号" />
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="params.s_status" clearable placeholder="请选择">
              <el-option v-for="(item,index) in statuslist" :label="item.txt" :value="item.val" />
            </el-select>
          </el-form-item>

          <el-form-item label=" ">
            <el-button type="primary" size="small" class="searchBtn" icon="el-icon-search" @click="handleSearch">搜索
            </el-button>
            <el-button type="info" plain @click="handleRet">清空</el-button>
          </el-form-item>
        </el-form>
				<div style="text-align: right;">
				  <el-button   v-has="'agent/draw/edit'"  type="primary" size="small" class="ml10" @click="down" plain><i class="el-icon-download" /> 批量导出</el-button>
				</div>

      </div>
      <el-table v-loading="loading" :data="list" style="width: 100%" :empty-text="emtypetxt">
        <el-table-column prop="sn" label="SN" align="center" width="150" />
        <el-table-column prop="source_type" label="提现来源" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.source_type === 1">代理</span>
            <span v-else-if="scope.row.source_type === 2">员工</span>
          </template>
        </el-table-column>
        <el-table-column label="来源ID" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.source_type === 1">{{scope.row.agent_id}}</span>
            <span v-else-if="scope.row.source_type === 2">{{scope.row.admin_id}}</span>
          </template>
        </el-table-column>
        <el-table-column label="来源姓名" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.source_type === 1">{{scope.row.agent.name}}</span>
            <span v-else-if="scope.row.source_type === 2">{{scope.row.admin.nickname}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="draw_type" label="收款方式" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.draw_type === 1">支付宝</span>
            <span v-else-if="scope.row.draw_type === 2">银行卡</span>
            <span v-else-if="scope.row.draw_type === 3">微信零钱</span>
          </template>
        </el-table-column>
        <el-table-column prop="draw_name" label="收款姓名" align="center" />
        <el-table-column prop="draw_account" label="收款账号" min-width="120" align="center">
          <template slot-scope="scope">
            <el-image v-if="scope.row.draw_type === 3" style="width:30px;height:30px" :src="scope.row.draw_account"
              :preview-src-list="[scope.row.draw_account]">
              <div slot="error" class="image-slot" />
            </el-image>
            <span v-else>{{ scope.row.draw_account }}</span>

          </template>
        </el-table-column>

        <el-table-column prop="money" label="金额" align="center" />
        <el-table-column prop="draw_phone" label="手机号" align="center" width="150"/>
        <el-table-column prop="pay_sn" label="支付号" align="center" :show-overflow-tooltip="true" />
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1" type="info" size="mini" disable-transitions>待打款</el-tag>
            <el-tag v-else-if="scope.row.status == 2" type="success" size="mini" disable-transitions>已打款</el-tag>
            <el-tag v-else-if="scope.row.status == 3" type="success" size="mini" disable-transitions>打款中</el-tag>
            <el-tag v-else-if="scope.row.status == -3" type="danger" size="mini" disable-transitions>打款失败</el-tag>
            <el-tag v-else-if="scope.row.status == -1" type="danger" size="mini" disable-transitions>无效不退</el-tag>
            <el-tag v-else-if="scope.row.status == -2" type="warning" size="mini" disable-transitions>无效退回</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="createtime" label="提现时间" align="center" width="200" />
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-link v-has="'agent/draw/edit'" :underline="false" type="primary" title="编辑" @click="edit(scope.row.id)">
              编辑</el-link>
            <el-link v-if="scope.row.status==1" v-has="'agent/draw/pay'" class="ml10" :underline="false" type="danger"
              title="打款" @click="twoPay(scope.row)">打款</el-link>

          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination :current-page="params.page" :page-sizes="[10, 20, 50, 100]" :page-size="params.pagesize"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>

    <el-dialog title="打款" :visible.sync="payDialogVisible" :close-on-click-modal="false" center width="40%">
      <el-form ref="payFormRef" :model="payForm" :rules="payFormRules" label-width="110px">
        <el-form-item label="支付账户" prop="payments_id">
          <el-select v-model="payForm.payments_id" clearable placeholder="请选择">
            <el-option v-for="item in paymentsList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="payDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subForm('payFormRef')">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    draw_index,
    draw_edit,
    draw_pay,
    draw_stj,
    draw_payments_get,
		draw_export
  } from '@/api/agent'
  import cardsData from '@/components/cards/index'

  export default {
    components: {
      cardsData
    },
    data() {
      return {
        total: 0,
        loading: true,
        emtypetxt: '',
        list: [],
        txlist: [{
          val: '1',
          txt: '代理'
        }, {
          val: '2',
          txt: '员工'
        }],
        dtlist: [{
          val: '1',
          txt: '支付宝'
        }, {
          val: '2',
          txt: '银行卡'
        }, {
          val: '3',
          txt: '微信零钱'
        }],
        statuslist: [{
          val: '1',
          txt: '待打款'
        }, {
          val: '2',
          txt: '已打款'
        }, {
          val: '3',
          txt: '打款中'
        }, {
          val: '-3',
          txt: '打款失败'
        }, {
          val: '-1',
          txt: '无效不退'
        }, {
          val: '-2',
          txt: '无效退回'
        }],
        params: {
          s_sn: '',
          s_agent_id: '',
          's_agent*name': '',
          s_draw_type: '',
          s_draw_account: '',
          s_status: '',
          s_createtime: [],
          'ss_agent*name': 'LIKE',
          ss_createtime: 'BETWEEN',
          page: 1,
          pagesize: 10
        },
        tjlist: [],
        payDialogVisible: false,
        payFormRules: {
          payments_id: [{
            required: true,
            message: '请选择打款账户',
            trigger: 'blur'
          }]
        },
        paymentsList: [],
        payForm: {
          payments_id: ''
        }
      }
    },
    created() {
      // 统计
      draw_stj().then(res => {
        this.tjlist = res.data.list
      })
      this.getList()
    },
    methods: {
      getList() {
        this.emtypetxt = '加载中...'
        this.loading = true
        draw_index(this.params).then(res => {
          this.list = res.data.list
          this.total = res.data.total
          this.loading = false
          if (this.list.length == 0) {
            this.emtypetxt = '暂无数据'
          }
        })
      },
      handleSearch() {
        this.params.page = 1
        this.getList()
      },
      // 分页
      handleSizeChange(val) {
        this.params.pagesize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.params.page = val
        this.getList()
      },

      edit(id) {
        this.$modalForm(draw_edit({
          id: id
        })).then(() => this.getList())
      },
      pay(id) {
        const _this = this
        _this.$modalSure('您确定要在线打款嘛？').then(() => {
          draw_pay({
            id: id
          }).then(res => {
            _this.$message.success(res.msg)
            _this.getList()
          })
        })
      },
      handleRet() {
        this.params = {
          s_sn: '',
          s_agent_id: '',
          's_agent*name': '',
          s_draw_account: '',
          s_draw_type: '',
          s_status: '',
          s_createtime: [],
          'ss_agent*name': 'LIKE',
          ss_createtime: 'BETWEEN',
          page: 1,
          pagesize: 10
        }
        this.getList()
      },
      twoPay(row) {
        draw_payments_get({
          type: row.draw_type
        }).then(res => {
          this.paymentsList = res.data
          if (res.data.length > 0) {
            this.payForm.payments_id = res.data[0].id
            this.payForm.id = row.id
            if (row.draw_type == 2) {
              this.paymentsList.forEach((res) => {
                if (res.type == 1) {
                  res.name = '【支付宝】' + res.name
                } else if (res.type == 2){
                  res.name = '【银行卡】' + res.name
                } else {
                  res.name = '【微信】' + res.name
                }
              })
            }
          }
        })
        this.payDialogVisible = true
      },
	  down(){
	    const loading = this.$loading({
	        lock: true,
	        text: '正在导出...',
	        spinner: 'el-icon-loading',
	        background: 'rgba(20, 20, 20, 0.7)'
	    });
	    
	    draw_export(this.params).then(res => {
	      const { export_json_to_excel } = require('../../assets/js/Export2Excel');
	      const tHeader = res.data.header;
	      const filterVal =res.data.filter;
	      const list = res.data.list;
	      const data = this.formatJson(filterVal, list);
	      export_json_to_excel(tHeader, data, '提现记录-'+new Date().toLocaleString());
	      loading.close();
	    })
	  },
	  formatJson(filterVal, jsonData) {
	    return jsonData.map(v => filterVal.map(j => v[j]))
	  },
      subForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            draw_pay(this.payForm).then(res => {
              this.$message.success(res.msg)
              this.payDialogVisible = false
              this.getList()
            })
          } else {
            return false
          }
        })
      }

    }
  }
</script>

<style lang="scss" scoped>
  .el-select {
    width: 80%;
  }
</style>
